<template>
<div id="toolbar">
  <div class="toolbar-title">图元区</div>
  <img :src="serviceSvg" style="width: 50%;margin: 1rem;" v-on:mousedown="startDrag" datatype="service"/>
  <img :src="circleSvg" style="width: 50%;margin: 0 1rem 1rem 1rem;" v-on:mousedown="startDrag" datatype="circle"/>
  <img :src="producerSvg" style="width: 50%;margin: 0 1rem 1rem 1rem;" v-on:mousedown="startDrag" datatype="producer"/>
  <img :src="consumerSvg" style="width: 50%;margin: 0 1rem 1rem 1rem;" v-on:mousedown="startDrag" datatype="consumer"/>
  <img :src="artifactSvg" style="width: 50%;margin: 0 1rem 1rem 1rem;" v-on:mousedown="startDrag" datatype="artifact"/>
  <img :src="messageSvg" style="width: 50%;margin: 0 1rem 1rem 1rem;" v-on:mousedown="startDrag" datatype="message"/>
</div>
</template>

<script>
import DragNode from "@/DragNode";
import FlowGraph from "@/Graph";
// import eventBus from '../EventBus'
// import CustomEdge from "@/CustomEdge"
// import Utils from '@/Utils'
// import FileSaver from 'file-saver'
export default {
  name: "ToolBar",
  data() {
    return {
      serviceSvg: require('../svg/service.svg'),
      circleSvg: require('../svg/circle.svg'),
      producerSvg: require('../svg/producer.svg'),
      consumerSvg: require('../svg/consumer.svg'),
      artifactSvg: require('../svg/artifact.svg'),
      messageSvg: require('../svg/message.svg'),
    }
  },
  methods: {
    startDrag(e) {
      let type = e.currentTarget.getAttribute('datatype')
      let node
      if(type === 'service') {
        node = this.flowGraph.graph.createNode({
          shape: 'html',
          width: 175,
          height: 250,
          html: 'service',
          ports: DragNode.getServicePort(),
          data: {label: ' ', model: []}, // model是类似于{artifact:'', handleType:''}对象的数组
        })
      }else if(type === 'circle') {
        node = this.flowGraph.graph.createNode({
          shape: 'html',
          width: 100,
          height: 100,
          html: 'circle',
          ports: DragNode.getCirclePort(),
          data: {label: ' ', model: {}},// model是{artifact:'', state:''}对象
        })
      }else if(type === 'producer') {
        node = this.flowGraph.graph.createNode({
          shape: 'producer-node',
          width: 40,
          height: 27,
          data: {label: ' ', model:{}},// model是{service:''}对象
        })
      }else if(type === 'consumer') {
        node = this.flowGraph.graph.createNode({
          shape: 'consumer-node',
          width: 30,
          height: 20,
          ports: DragNode.getConsumerPort(),
          data: {label: ' ', model:{}},// model是{service:'',message:''}对象
        })
      }else if(type === 'artifact') {
        node = this.flowGraph.graph.createNode({
          shape: 'artifact-node',
          width: 30,
          height: 20,
          data: {label: ' '},//只能选择Artiflow树中的Artifact类来决定它的label
        })
      }else if(type === 'message') {
        node = this.flowGraph.graph.createNode({
          shape: 'message-node',
          width: 30,
          height: 20,
          data: {label: ' '},
        })

      }
      this.flowGraph.dnd.start(node, e);
    },
  },
  mounted() {
    // 实例化FlowGraph
    this.flowGraph = new FlowGraph(this, 'grid','toolbar')
  }
}
</script>

<style scoped>
#toolbar {
  text-align: center;
}
.toolbar-title {
  line-height: 3rem;
  height: 3rem;
  text-align: center;
  border-bottom: 1px solid #cecece;
}
</style>
